<template>
    <div>
        <!-- destroyOnClose 设为true关闭时销毁元素 -->
        <a-modal style="top: 5vh" width="70vw" :footer="null" ref="modalRef" :visible="isShow" :destroyOnClose="true"
            :wrap-style="{ overflow: 'hidden' }" @ok="handleOk" @cancel="cancelChange">
            <UserManage :isShow="changeType" />
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">
                    <a-button @click="handleCommon" type="primary">交管用户</a-button>
                    <a-button @click="handleTraffic" type="primary" style="background-color: #2abf5b; margin-left: 20px"
                        class="event-button">普通用户
                    </a-button>
                </div>
            </template>
            <template #modalRender="{ originVNode }">
                <div :style="transformStyle">
                    <component :is="originVNode" />
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script setup>
/* message弹窗 */
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import { ref, computed, watch, watchEffect } from 'vue';
/* 按需加载的vue组件库 */
import { useDraggable } from '@vueuse/core';
/* 接收父组件的数据 */
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    }
})
/* 取消修改 */
const emit = defineEmits(['cancelManage'])
const cancelChange = () => {
    emit('cancelManage', false)
    message.info("退出管理")
}
/* 选择用户类型 */
const changeType = ref(true)
const handleTraffic = () => {
    changeType.value = false
}
const handleCommon = () => {
    changeType.value = true
}

/* ------------------拖拽------------------------ */
const modalTitleRef = ref(null);
const {
    x,
    y,
    isDragging,
} = useDraggable(modalTitleRef);
const handleOk = e => {
    console.log(e);
    visible.value = false;
};
const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
});
watch([x, y], () => {
    if (!startedDrag.value) {
        startX.value = x.value;
        startY.value = y.value;
        const bodyRect = document.body.getBoundingClientRect();
        const titleRect = modalTitleRef.value.getBoundingClientRect();
        dragRect.value.right = bodyRect.width - titleRect.width;
        dragRect.value.bottom = bodyRect.height - titleRect.height;
        preTransformX.value = transformX.value;
        preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
});
watch(isDragging, () => {
    if (!isDragging) {
        startedDrag.value = false;
    }
});
watchEffect(() => {
    if (startedDrag.value) {
        transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value;
        transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value;
    }
});
const transformStyle = computed(() => {
    return {
        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
});
</script>
<style>
.event-button {
    background-color: #2abf5b;
    margin-left: 20px;

}
</style>